<template>
  <div class="chart">
    <el-card class="top">
      <ul class="chart-top">
        <li class="item">
          <div class="circle1">{{ info.increment_users }}</div>
          <div class="text">今日新增用户</div>
        </li>
        <li class="item">
          <div class="circle1">{{ info.total_users }}</div>
          <div class="text">总用户量</div>
        </li>
        <li class="item">
          <div class="circle2">{{ info.increment_questions }}</div>
          <div class="text">新增试题</div>
        </li>
        <li class="item">
          <div class="circle2">{{ info.total_questions }}</div>
          <div class="text">总试题量</div>
        </li>
        <li class="item">
          <div class="circle3">{{ info.total_done_questions }}</div>
          <div class="text">总刷题量</div>
        </li>
        <li class="item">
          <div class="circle3">{{ info.personal_questions }}</div>
          <div class="text">人均刷题量</div>
        </li>
      </ul>
    </el-card>
    <el-card>
      <div class="bottom">
        <div class="title">数据展示</div>
        <div class="echarts" ref="echarts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import echarts123 from 'echarts'
import { dataTitle, dataStatistics } from '@/api/chart.js'
import '@/style/base.css'
export default {
  data () {
    return {
      info: {},
      list: [],
      newList: [],
      myEcharts: null
    }
  },
  created () {
    this.dataTitleData()
  },
  mounted () {
    this.getThepieChart()
  },
  methods: {
    async dataTitleData () {
      const res = await dataTitle()
      console.log('用户数据', res)
      this.info = res.data.data
      // console.log(this.info)
    },
    getThepieChart () {
      dataStatistics().then(res => {
        console.log('饼状图数据', res)
        this.list = res.data.data
        console.log(this.list)
        this.newList = this.list.map(item => {
          return item.name
        })
        // console.log(this.newList)

        this.myEcharts = echarts123.init(this.$refs.echarts)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            data: this.newList
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.list
            }
          ]
        }
        this.myEcharts.setOption(option)
        console.log(this.myEcharts)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
  .top {
    margin-bottom: 13px;
    .chart-top {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .circle1,
      .circle2,
      .circle3 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 24px;
        border-radius: 50%;
        text-align: center;
      }
      .circle1 {
        border: 2px solid #0086fa;
        color: #0086fa;
      }
      .circle2 {
        color: #f76137;
        border: 2px solid #f76137;
      }
      .circle3 {
        color: #8bdda3;
        border: 2px solid #8bdda3;
      }
      .text {
        text-align: center;
      }
    }
  }
  .bottom {
    height: 550px;
    .echarts {
      height: 450px;
    }
    .title {
      color: #7b7b7b;
      font-size: 20px;
    }
  }
}
</style>
